<template>
  <div>
    <h2>router-demo</h2>
    <!-- 第一步，要去创建几个可以改变url的标签 -->
    <!-- router-link相当于a标签，to属性相当于href属性 -->
    <!-- 当项目已经使用了路由实例以后才能用，router-link是路由提供的组件 -->
    <router-link to="/movies">电影/影院</router-link> |
    <router-link to="/video">视频</router-link> |
    <router-link to="/show">演出</router-link> |
    <router-link to="/mine">我的</router-link> |
    <router-link to="/detail/345">详情1</router-link> |
    <router-link to="/detail/789">详情2</router-link>

    <!-- 第二步，创建一个可以存放切换内容的容器 -->
    <router-view></router-view>
    <!-- <router-view name="mine"></router-view>
    <router-view name="mine2"></router-view> -->

    <!-- 4个router-link会渲染成4个a标签 -->
    <!-- 当点击a标签的时候，会改变url -->
    <!-- url去匹配路由表的path -->
    <!-- 将对应的component组件渲染到页面的router-view标签上 -->

    <!-- 页面不再需要引入到根组件，只需要统一引入到router/index.js里面 -->
  </div>
</template>
